import React from 'react';
import clsx from 'clsx';
import { Card } from '../Card';
import { Flex, FlexItem } from '../Flex';
import { Icon } from '../Icon';
import { Text } from '../Text';
import getExtName from '../../utils/getExtName';
import prettyBytes from '../../utils/prettyBytes';

export interface FileCardProps {
  className?: string;
  file: File;
  extension?: string;
  children?: React.ReactNode;
}

export const FileCard = (props: FileCardProps) => {
  const { className, file, extension, children } = props;
  const { name, size } = file;
  const ext = extension || getExtName(name);

  return (
    <Card className={clsx('FileCard', className)} size="xl">
      <Flex>
        <div className="FileCard-icon" data-type={ext}>
          <Icon type="file" />
          <Text truncate as="span" className="FileCard-ext">
            {ext}
          </Text>
        </div>
        <FlexItem>
          <Text truncate={2} breakWord className="FileCard-name">
            {name}
          </Text>
          <div className="FileCard-meta">
            {size != null && <span className="FileCard-size">{prettyBytes(size)}</span>}
            {children}
          </div>
        </FlexItem>
      </Flex>
    </Card>
  );
};
